<template>
  <view class="page">
    <!-- 顶部状态 -->
    <index-page-header class="header" />
    <!-- 导航组件 -->
    <index-page-navigation :view-list="viewList" />
    <!-- 导航视图 -->
    <body-views class="body-views" ref="bodyViewsRef" />
    <!-- 骑手设置 -->
    <order-taking-settings />
    <!-- 系统配送单通知 -->
    <system-delivery-order-notice />
  </view>
</template>

<script setup lang="ts">
import IndexPageHeader from './header/index.vue'
import BodyViews from './body-views/index.vue'
import IndexPageNavigation from './navigation/index.vue'
import OrderTakingSettings from './order-taking-settings/index.vue'
import SystemDeliveryOrderNotice from './system-delivery-order-notice/index.vue'
import { ref, onMounted } from 'vue'
const bodyViewsRef = ref()
const viewList = ref()
onMounted(() => {
  viewList.value = bodyViewsRef.value.viewList
})
</script>

<style scoped lang="scss">
.page {
  $header-nav-z-index: 100;

  position: absolute;
  display: flex;
  flex-direction: column;
  inset: 0;
  background-color: #1a1a1a;

  .header {
    z-index: $header-nav-z-index;
    background-color: red;
  }

  .body-views {
    /* 这里必须要这么做，决定子组件的高度 */
    position: relative;
    z-index: $header-nav-z-index - 1;
    flex-grow: 1;
  }
}
</style>
